<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
  import * as echarts from "echarts";
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'

  export default {
    props: {
      pieData:{
        type: Array,
        required: true
      }
    },
    data() {
      return {
        myChart: {},
        pieName: [],
        myChartStyle: { float: "left", width: "750px", height: "400px" } //图表样式
      };
    },
    watch: {
      pieData: {
        deep: true,
        handler(val) {
          this.initEcharts(val);
        }
      }
    },
    beforeDestroy() {
      if (!this.myChart) {
        return
      }
      this.myChart = null
    },
    mounted() {
      this.$nextTick(() => {
        this.initEcharts(); //数据初始化
      })
    },
    methods: {
      initEcharts() {
        // 饼图
        const option = {
          title: {
            text: '数据分析图',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '',
              type: 'pie',
              label: {
                show: true,
                formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
              },
              radius: '50%',
              data: this.pieData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption(option);
      }
    }
  };
</script>
